{extends 'base/site2.html'}
{block name="page_header"}{include file="common/header.html" inline}{/block}
{block name="page_nav"}{include file="common/slide-nav.html" inline}{/block}
{block name="page_styles"}
<link rel="stylesheet" type="text/css" href="/css/mediation/index/index.css" />
<style>
    .page-header{
        {* border: 1px solid #eee; *}
        border: none;
        margin-bottom: 0;
        border-radius: 5px 5px 0 0;
    }
    .todo-info{
      position: relative;
      margin: 20px 0 20px 24px;
    }

    .todo-info a {
      position: relative;
      display: flex;
      height: calc(124/1080*100vh);
      flex: 1;
      color: #1D2129;
      border-radius: 12px;
      border: 1px solid #F8F9FA;
      justify-content: space-between;
      max-width: 241px;
      overflow: hidden;
      margin-right: 26px;
      background: linear-gradient( 141deg, #FCFEFF 0%, #F7FBFF 100%);
      border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
      border: 0.01rem solid #F8F9FA;
      box-sizing: border-box;
      font-weight: bold;
    }
    .todo-info a>div {
      padding-left: 20px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .todo-info a img {
      position: absolute;
      right: 0;
      bottom: -20%;
    }
    .session-main{
        padding-left:0;
        padding-right:0;
        padding-top: 0 !important;
        height: auto;
        overflow: auto;
        background: #FFFFFF;
        border-radius: 12px;
        /* 首页需要 */
        overflow: hidden;
    }
    .switch-item{
        position: relative;
        cursor: pointer;
        font-weight: 400;
        font-size: 14px;
        color: #86909C;
    }
    .switch-item span{
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 84px;
        height: 2px;
        /* background: #fff; */
        transform: translate(-50%, 0);
    }
    .switch-item:first-child {
      margin-left: 24px;
      margin-right: 36px;
    }
    .switch-item.active{
        color: #4E5969;
    }
    .switch-item.active span{
        background: #1474FA;
    }
    .switch-item:hover{
        color: #4E5969;
    }
    .switch-item:hover span{
        background: #1474FA;
    }
    .sessionPage{
        padding-bottom:0;
    }
</style>
<style>
</style>
{/block}
{block name="page_scripts"}
<script type="text/javascript" src="/js/mediation/index/index.min.js" init="mediation/index/index"></script>
{/block}
{block name="page_section"}
    <div class="sessionPage clearfix" style="height:100%;">
        <div class="page-header" style="margin-top: 18px;">
          <span class="tit">案件实时概况<span/>
        </div>
        <input type="hidden" value="{$isalert}" id="isalert">
        <div class="count-todo-info todo-info clearifx" style="display: flex;justify-content: space-between;">
            <a href="javascript:;">
              <div>
                <div class="todo-type">今日新增</div>
                <div style="font-size: 20px;">{if $count['addCount']}{$count['addCount']}{else}0{/if}<span style="font-size: 14px;">件</span></div>
              </div>
              <img src="/images/mediation/index/u7.png">
            </a>
            <a href="javascript:;" style="display: flex;">
              <div>
                <div class="todo-type">调解案件</div>
                <div style="font-size: 20px;">{if $count['mediateCount']}{$count['mediateCount']}{else}0{/if}<span style="font-size: 14px;">件</span></div>
              </div>
              <img src="/images/mediation/index/u9.png">
            </a>
            <a href="javascript:;" style="display: flex;">
              <div>
                <div class="todo-type">还款案件</div>
                <div style="font-size: 20px;">{if $count['repaymentCount']}{$count['repaymentCount']}{else}0{/if}<span style="font-size: 14px;">件</span></div>
              </div>
              <img src="/images/mediation/index/u13.png">
            </a>
            <a href="javascript:;" style="display: flex;">
                <div>
                    <div class="todo-type">已结案</div>
                    <div style="font-size: 20px;">{if $count['closeCount']}{$count['closeCount']}{else}0{/if}<span style="font-size: 14px;">件</span></div>
                </div>
                <img src="/images/mediation/index/u17.png">
            </a>
            <a href="javascript:;" style="display: flex;">
                <div>
                    <div class="todo-type">7日内到期</div>
                    <div style="font-size: 20px;">{if $count['expireeCount']}{$count['expireeCount']}{else}0{/if}<span style="font-size: 14px;">件</span></div>
                </div>
                <img src="/images/mediation/index/u21.png">
            </a>
        </div>
        <div class="row">
          <div class="index_left left">
            <!-- 案件调解 -->
            <div class="col-md-6 show_data1">
              <div class="tit" style="font-size: 18px;width:92%;margin:0 auto;">案件调解</div>
              <div class="content">
                <div class="special-6">
                  <p><img src="/images/mediation/index/tiaojie1.png" alt="" /> </p>
                  <div class="">
                    <p>
                        {if empty($count['firstMediateCount'])}
                            0 件
                        {else}
                            {$count['firstMediateCount']} 件
                        {/if}
                    </p>
                    <p>待调解</p>
                  </div>
                </div>
                <div class="special-6">
                  <p><img src="/images/mediation/index/tiaojie2.png" alt="" /> </p>
                  <div class="">
                    <p>
                        {if empty($count['inMediateCount'])}
                        0 件
                        {else}
                        {$count['inMediateCount']} 件
                        {/if}
                    </p>
                    <p>调解中</p>
                  </div>
                </div>
                <div class="special-6">
                  <p><img src="/images/mediation/index/tiaojie3.png" alt="" /> </p>
                  <div class="">
                    <p>
                        {if empty($count['finishMediateCount'])}
                        0 件
                        {else}
                        {$count['finishMediateCount']} 件
                        {/if}
                    </p>
                    <p>完成调解</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 案件还款 -->
            <div class="col-md-6 show_data2">
              <div class="tit" style="font-size: 18px;width:92%;margin:0 auto;">案件还款</div>
              <div class="content">
                <div class="special-6">
                  <p><img style="width:48px;height: auto;" src="/images/mediation/index/huankuan1.jpg" alt="" /> </p>
                  <div class="">
                    <p>
                        {if empty($count['inRepaymentCount'])}
                        0 件
                        {else}
                        {$count['inRepaymentCount']} 件
                        {/if}
                    </p>
                    <p>还款中</p>
                  </div>
                </div>
                <div class="special-6">
                  <p><img style="width:48px;height: auto;" src="/images/mediation/index/huankuan2.jpg" alt="" /> </p>
                  <div class="">
                    <p>
                        {if empty($count['breakRepaymentCount'])}
                        0 件
                        {else}
                        {$count['breakRepaymentCount']} 件
                        {/if}
                    </p>
                    <p>失约还款</p>
                  </div>
                </div>
                <div class="special-6">
                  <p><img style="width:48px;height: auto;" src="/images/mediation/index/huankuan3.jpg" alt="" /> </p>
                  <div class="">
                    <p>
                        {if empty($count['finishRepaymentCount'])}
                        0 件
                        {else}
                        {$count['finishRepaymentCount']} 件
                        {/if}
                    </p>
                    <p>完成还款</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 今日联系计划 && 今日还款计划 -->
            <div class="col-md-6 plane">
              <div class="tab">
                <span class="switch-item plan_switch-item active">今日联系计划<span></span></span>
                <span class="switch-item plan_switch-item">今日还款计划<span></span></span>
              </div>
              <div class="plane_list">
                {if !empty($contactlist)}
                  <table id="connect_list" class="show-table table">
                    <input type="hidden" id="caseId" value="" name="caseId">
                    <thead>
                        <tr>
                            <th>当事人</th>
                            <th>用户标签</th>
                            <th>联系时间</th>
                            <th>联系状态</th>
                        </tr>
                    </thead>
                    <tbody>
                      {foreach from=$contactlist key=key item=item}
                        <tr>
                          <td>
                            <span style="cursor:pointer;color:#1474FA;font-weight:bold;" onclick="jumpDetails({$item.id})">{$item.litigantName}</span>
                          <td>{$item.customLabel}</td>
                          <td>{$item.nextTime}</td>
                          <td>{$item.todayContactStutus}</td>
                        </tr>
                      {/foreach}
                    </tbody>
                  </table>
                {else}
                  <div class="show-table table_connect_noData" style="height: 100%;{if !empty($contactlist)}display:none;{/if}text-align:center;">
                    <p style="margin-top:5%;">
                      <img src="/images/news/index/noData.png" alt="">
                    </p>
                    <p style="padding-top:10px;font-size: 14px;color: #86909C;">暂无数据</p>
                  </div>
                {/if}

                {if !empty($returnlist)}
                  <table id="repay_list" class="show-table table table-hover" style="display:none;">
                    <thead>
                        <tr>
                            <th>当事人</th>
                            <th>还款时间</th>
                            <th>还款金额</th>
                            <th>还款状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach from=$returnlist key=key item=item}
                            <tr>

                                <td>
                                  <span style="cursor:pointer;color:#1474FA;font-weight:bold;" onclick="jumpDetails({$item.caseId})">{$item.litigantName}</span>
                                </td>
                                <td>{$item.repaymentDate|date_format:"%Y/%m/%d"}</td>
                                <td>{$item.repayAmount}</td>
                                <td>{$planStatusArr[$item.status]}</td>
                            </tr>
                        {/foreach}
                    </tbody>
                  </table>
                {else}
                  <div class="show-table plane_list_noData" style="height: 100%;display:none;text-align:center;">
                    <p style="margin-top:5%;">
                      <img src="/images/news/index/noData.png" alt="">
                    </p>
                    <p style="padding-top:10px;font-size: 14px;color: #86909C;">暂无数据</p>
                  </div>
                {/if}
              </div>
            </div>
          </div>
          <!-- 今日工作实时概况 -->
          <div class="index_right right">
            <p class="switch-item">今日工作实时概况</p>
            <div class="details">
              <div>
                <div class="icon_title">
                  <img src="/images/mediation/index/u35.png">
                  <div class="icon_right" style="padding-top: 8px">
                    <p>外呼总时长&nbsp;&nbsp;<span>{$callOutQuery['talkTime']}</span></p>
                    <p>外呼总数&nbsp;&nbsp;<span>{$callOutQuery['callConnected'] + $callOutQuery['callNotConnected']}</span></p>
                  </div>
                </div>
                <div class="detail_content">
                  <p>呼出接通率 | {$callOutQuery['callConnectedRate']}%</p>
                  <p>
                    <span>接通</span>
                    <span>{$callOutQuery['callConnected']}</span>
                  </p>
                  <p>
                    <span>未接通</span>
                    <span>{$callOutQuery['callNotConnected']}</span>
                  </p>
                </div>
              </div>
                <div>
                  <div class="icon_title">
                    <img src="/images/mediation/index/u34.png" />
                    <div class="icon_right" style="padding-top: 8px">
                      <p>呼入总时长&nbsp;&nbsp;<span>{$callinQuery['talkTime']}</span></p>
                      <p>呼入总数&nbsp;&nbsp;<span>{$callinQuery['callConnected'] + $callinQuery['callNotConnected']}</span></p>
                    </div>
                  </div>
                  <div class="detail_content">
                    <p>呼入接通率 | {$callinQuery['callConnectedRate']}%</p>
                    <p>
                      <span>接通</span>
                      <span>{$callinQuery['callConnected']}</span>
                    </p>
                    <p>
                      <span>未接通</span>
                      <span>{$callinQuery['callNotConnected']}</span>
                    </p>
                  </div>
                </div>
            </div>
          </div>
        </div>
    </div>
    <script>
      $(function () {
          if($('#isalert').val()){
              $.confirm({
                  title: '提示！',
                  content: '检测您的密码还是初始密码，请及时修改',
                  confirmButton: '确定',
                  cancelButton: '取消',
                  confirm: function(){
                      window.location.replace ('/user/editpassword?mast_udpate=1');
                  },
              });

          }
      })
      let countH = $('.navbar-inverse').height()
      +10+
      18+$('.page-header').height()+
      20+$('.count-todo-info').height()+20+
      $('.show_data1').height()+
      $('.show_data2').height()+
      10+10+
      $('.tab').height();
      $('.plane_list').css({
        'height': window.innerHeight - countH,
      })
      $('.index_right').css({
        'height': $('.index_left').height()
      })
    $('body')
      .on('click','.plan_switch-item',function(){
        $(this).addClass('active').siblings().removeClass('active');
        $('.show-table').css('display', 'table');
      })
      function jumpDetails (id) {
        localStorage.setItem('showButton', false);
        $('#caseId').val(id);
        $('#details_page').css('display', 'flex');
        $('.mini_container').css('display', 'none');
        $('#details_page').load('/mediation/views/mediate/newDetail.html');
      }
    </script>
{/block}
